<template>
  <div class="add-form">
    <el-dialog title="试题预览" :visible="dialogPerview" @close="closePreview">
      <el-form
        label-position="left"
        label-width="150px"
        style="width: 96%; margin-left: 10px; margin-right: 10px"
        v-model="preview"
      >
        <el-row :gutter="20">
          <el-col :span="6" class="col-margin"
            ><div>【题型】：{{ previewQuestionType(preview) }}</div></el-col
          >
          <el-col :span="6" class="col-margin"
            ><div>【编号】：{{ preview.id }}</div></el-col
          >
          <el-col :span="6" class="col-margin"
            ><div>【难度】：{{ previewDifficulty(preview) }}</div></el-col
          >
          <el-col :span="6" class="col-margin"
            ><div>【标签】：{{ preview.tags }}</div></el-col
          >
          <el-col :span="6" class="col-margin"
            ><div>【学科】：{{ preview.subjectName }}</div></el-col
          >
          <el-col :span="6" class="col-margin"
            ><div>【目录】：{{ preview.directoryName }}</div></el-col
          >
          <el-col :span="6" class="col-margin"
            ><div>【方向】：{{ preview.direction }}</div></el-col
          >
        </el-row>
        <hr style="width: 100%" />
        <!-- 单选 -->
        <el-row v-if="showIf">
          【题干】：
          <el-col
            ><div
              class="col-margin"
              style="margin-left: 10px; color: blue"
              v-html="preview.question"
            ></div
          ></el-col>
          <el-col
            ><div style="margin-left: 10px">
              单选题 选项 : (以下选项中的选项为正确答案)
            </div></el-col
          >
          <el-col
            class="col-margin"
            v-for="item in preview.options"
            :key="item.id"
            ><div style="margin-left: 10px">
              <el-radio v-model="isRight" :label="item.isRight">{{
                item.title
              }}</el-radio>
            </div></el-col
          >
        </el-row>
        <!-- 多选 -->
        <el-row v-else-if="showElseIf">
          【题干】：
          <el-col
            ><div
              class="col-margin"
              style="margin-left: 10px; color: blue"
              v-html="preview.question"
            ></div
          ></el-col>
          <el-col
            ><div style="margin-left: 10px">
              单选题 选项 : (以下选项中的选项为正确答案)
            </div></el-col
          >
          <el-col class="col-margin">
            <el-checkbox-group v-model="isRights">
              <div
                class="checkbox"
                v-for="item in preview.options"
                :key="item.id"
              >
                <el-checkbox :label="item.isRight">{{
                  item.title
                }}</el-checkbox>
              </div>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <!-- 简答 -->
        <el-row v-else>
          【题干】：
          <el-col
            ><div
              class="col-margin"
              style="margin-left: 10px; color: blue"
              v-html="preview.question"
            ></div
          ></el-col>
        </el-row>
        <hr style="width: 100%" />
        <!-- 参考答案  和  视频 -->
        <el-row>
          <el-col
            >【参考答案】：<el-button
              type="danger"
              @click="showAnswer = !showAnswer"
              >视频答案预览</el-button
            ></el-col
          >
          <el-col v-if="showAnswer">
            <div class="vido-wrap" style="width: 100%; overflow: hidden">
              <video
                controls
                autoplay
                muted
                :src="videoURL"
                width="100%"
                height="50%"
              ></video>
            </div>
          </el-col>
        </el-row>
        <hr style="width: 100%" />
        <!-- 答案解析 -->
        <el-row>
          <el-col class="col-margin"
            >【答案解析】：<span v-html="preview.answer"></span
          ></el-col>
        </el-row>
        <hr style="width: 100%" />
        <!-- 题目备注 -->
        <el-row>
          <el-col class="col-margin"
            >【题目备注】：{{ preview.remarks }}</el-col
          >
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closePreview">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'questionsPreview',
  props: {
    dialogPerview: {
      type: Boolean
    },
    preview: {
      type: Object,
      default: () => {}
    },
    videoURL: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isRights: [1],
      isRight: 1,
      showAnswer: false,
      showElseIf: false,
      showIf: false
    }
  },
  methods: {
    // 关闭弹窗
    closePreview () {
      this.showAnswer = false
      this.$emit('update:dialogPerview', false)
    },
    // 判断试题类型
    previewQuestionType (data) {
      // console.log(data)
      if (data.questionType === '1') {
        this.showIf = true
        return '单选'
      } else if (data.questionType === '2') {
        this.showElseIf = true
        return '多选'
      } else {
        return '简答'
      }
    },
    // 判断难度
    previewDifficulty (row) {
      if (row.questionType === '1') {
        return '简单'
      } else if (row.questionType === '2') {
        return '一般'
      } else {
        return '困难'
      }
    }
  }
}
</script>

<style>
p {
  display: inline-block;
}
.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-form-item--medium {
  margin-bottom: 22px;
}
.el-dialog__footer {
  text-align: center;
}
</style>
<style scoped lang="scss">
.checkbox {
  padding: 10px 0;
}
.add-form {
  padding-right: 10px;
}
.col-margin {
  padding: 10px 0px;
}
</style>
